import {useThemeStore} from "@/stores";
import type {GlobalThemeOverrides} from 'naive-ui'
import {darkTheme} from 'naive-ui'
import {alpha, lighten} from '@/utils'
import {borderRadius} from "@/config/themeSetting";
import {computed, toRefs} from "vue";

export const useThemeOverridesHook = () => {
    const themeStore = useThemeStore()
    const {getThemeColor} = toRefs(themeStore)
    const darkTheme = computed(
        (): GlobalThemeOverrides => {
            // 通用
            const commonObj = {
                common: {
                    fontFamily: "\"PragmataPro Mono\",FZZhunYuan-M02S,v-sans, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
                    fontFamilyMono: "\"PragmataPro Mono\",v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
                    primaryColor: getThemeColor.value,
                    primaryColorHover: lighten(alpha(getThemeColor.value), 0.1),
                    primaryColorPressed: lighten(alpha(getThemeColor.value), 0.1),
                    primaryColorSuppl: getThemeColor.value,
                    // fontSize: "12px",
                    // fontSizeMini: "12px",
                    // fontSizeTiny: "12px",
                    // fontSizeSmall: "12px",
                    // fontSizeMedium: "12px",
                    // fontSizeLarge: "12px",
                    // fontSizeHuge: "12px",
                    // labelFontSize: "12px",
                    // fontWeight: "400",
                    // fontWeightStrong: "500",
                    borderRadius
                },

                form: {
                    // labelFontSizeLeftSmall: "12px",
                    // labelFontSizeLeftMedium: "12px",
                    // labelFontSizeLeftLarge: "12px",
                    // labelFontSizeTopSmall: "12px",
                    // labelFontSizeTopMedium: "12px",
                    // labelFontSizeTopLarge: "12px",
                },

            }
            // 亮色主题
            const lightObject = {
                common: {
                    ...commonObj.common,
                    ...commonObj.form
                },
                Layout: {
                    siderColor: "#fafafc",
                },
                LoadingBar: {
                    colorLoading: getThemeColor.value
                }
            }
            // 暗色主题
            const dartObject = {
                common: {
                    ...commonObj.common,
                    ...commonObj.form
                },
                LoadingBar: {
                    colorLoading: getThemeColor.value
                }
            }
            return themeStore.getDarkTheme ? dartObject : lightObject
        }
    )
    return darkTheme
}

// 返回暗黑主题
export const useDarkThemeHook = () => {
    const themeStore = useThemeStore()
    return computed(() => (themeStore.getDarkTheme ? darkTheme : undefined))
}
